import React, { Component } from 'react'

export default class CrossPiece extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isMouse: false
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    handleClick = () => {
        this.props.handleCrossClick(this.props.id);
    }

    render() {
        const { isMouse } = this.state;
        const { clickCrossID } = this.props;
        return (
            <div
                style={{
                    backgroundColor: '#00FFFF',
                    opacity: (isMouse || clickCrossID === this.props.id ? 1 : 0.5),
                    width: 148,
                    borderRight: '2px solid #ccc',
                    textAlign: 'center',
                    borderTopLeftRadius: 10,
                    borderTopRightRadius: 10,
                    height: 50,
                    lineHeight: '50px',
                    fontSize: 20,
                    cursor: 'pointer'
                }}
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
                onClick={this.handleClick}
            >
                {this.props.item.content}
            </div>
        )
    }
}
